import React,{useCallback,useMemo} from 'react';
function FunctionCounter(props){
	console.log('FunctionCounter')
	return <div>{props.doubleCount}</div>
}
//使用React.memo包装后的函数组件有1个特性，如果属性不变的时候 就不会重新渲染
const MemoFunctionCounter = React.memo(FunctionCounter);
function Counter() {
	const [count, setCount] = React.useState(0);
	const [title, setTitle] = React.useState('zhufeng');
	//useCallback缓存是一个函数
	const add = useCallback(() => {
		console.log('setCount');
		setCount(count=>count+1);
	},[]);
	//在第一次渲染的执行会执行useMemo中的第一个参数函数，此函数称为工厂函数，用用计算一个值，或者说1个结果 
	//以后更新的时候，再次渲染，会判断依赖数组的值有没有变化，如果变化了，则重新计算新的值，如果没有变化，则不再重新计算
	const doubleCount = useMemo(()=>{
		console.log('useMemo');
		return count*2;
	},[count]);
	return (
		<div>
			<p>{count}</p>
			<input value={title} onChange={(event)=>setTitle(event.target.value)}/>
			<MemoFunctionCounter add={add} doubleCount={doubleCount}/>
			<button onClick={add}>+</button>
		</div>
	)
}
export default Counter;
